<template>
    <div class="modal" v-show="$store.state.isOpenLogin">
        <div class="modal_bg" @click="closeLogin"></div>
        <div class="modal_con">
            <img class="close" @click="closeLogin" src="../assets/images/login/userArrow.png" alt="" />
            <section>
                <span :class="{ active: showPhone }" @click="showPhone = true">手机号登录</span>
                <span :class="{ active: !showPhone }" @click="weixinClickFn">微信扫码登录</span>
            </section>
            <div class="phone_login" v-show="showPhone">
                <div class="line tanxin">
                    <input type="text" v-model="phone" placeholder="请输入手机号" />
                </div>
                <div class="box">
                    <slide-verify :l="42" :r="10" :w="362" :h="140" slider-text="向右滑动" @success="onSuccess"
                        @fail="onFail" @refresh="onRefresh" :style="{ width: '100%' }" class="slidb"
                        ref="slideBlock"></slide-verify>
                    <div>{{ msg }}</div>
                </div>
                <div class="line tanxin">
                    <input type="text" v-model="code" placeholder="请输入短信验证码" />
                    <div class="btn" @click="getCodeFn" v-if="codeStatus">获取验证码</div>
                    <div class="countdown" v-else>{{ count }}</div>
                </div>
                <div class="btn_login" @click="submitFn">登录</div>
            </div>
            <div id="weixin" v-show="!showPhone"></div>
        </div>
    </div>
</template>

<script>
import { getCodeApi, LoginApi, BindWechatApi } from "@/request/api";
const vaildatephone = (phone) => {
    let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    return reg.test(phone.trim());
}
export default {
    data() {
        return {
            showPhone: true,
            // 手机号
            phone: "15182131138",
            // 验证码
            code: "8293",
            msg: "向右滑动",
            falg: false,
            // 倒计时
            count: 60,
            codeStatus: true,
        };
    },
    methods: {
        //   关闭这个登录框
        closeLogin() {
            this.$store.commit("changeLoginShow", false);
        },
        // 拼图成功
        onSuccess(times) {
            console.log("验证通过，耗时" + times + "毫秒");
            this.msg = `login success, 耗时${(times / 1000).toFixed(1)}s`;
            this.falg = true;
        },
        // 拼图失败
        onFail() {
            this.msg = "失败";
        },
        // 拼图刷新
        onRefresh() {
            this.msg = "再试一次";
        },
        // 点击登录按钮
        submitFn() {
            // 验证手机号格式
            let result = vaildatephone(this.phone);
            // 手机号错误
            if (!result) {
                let obj = { content: "请重新输入手机号", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
                return;
            }
            // 验证码是否填写
            let vericode = this.code.trim();
            if (vericode == "") {
                // 验证码有误
                let obj = { content: "请输入验证码", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
                return;
            }
            // 滑块是否滑动
            if (this.msg == "向右滑动" ||
                this.msg == "失败" ||
                this.msg == "再试一次") {
                let obj = { content: "请完成拼图", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
                return
            }
            // 登录
            let uuid = sessionStorage.getItem("uuid")
            if (uuid) {
                BindWechatApi({
                    phone: this.phone,
                    verifycode: this.code,
                    uuid: uuid
                }).then((res) => {
                    // 存储token
                    localStorage.setItem("x-auth-token", res.data["x-auth-token"]);
                    let obj = { content: res.data.message, icon: "success" };
                    this.$store.dispatch("AsyncToast", obj);
                    this.$store.commit("changeLoginShow", false);
                    this.$emit("updateKeyFn");
                    sessionStorage.removeItem('uuid')
                });
            } else {
                LoginApi({
                    verifyCode: this.code,
                    phone: this.phone,
                }).then((res) => {
                    if (res.data.code === 0) {
                        // 存储token
                        localStorage.setItem("x-auth-token", res.data["x-auth-token"]);
                        // 提示成功
                        let obj = { content: res.data.message, icon: "success" };
                        this.$store.dispatch("AsyncToast", obj);
                        // 关闭登录框
                        this.$store.commit("changeLoginShow", false);
                        // 更新header组件
                        this.$emit("updateKeyFn");
                        // 删除地址栏的code
                        this.$router.push(this.$route.path);
                        // 删除uuid
                        sessionStorage.removeItem('uuid')
                    }
                });
            }
        },
        // 获取验证码
        getCodeFn() {
            // 判断有没有手机号
            let result = vaildatephone(this.phone);
            if (!result) {
                let obj = { content: "请重新输入手机号", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
                return;
            }
            getCodeApi({
                phone: this.phone,
            }).then((res) => {
                if (res.data.code === 0) {
                    let obj = { content: res.data.message, icon: "success" };
                    this.$store.dispatch("AsyncToast", obj);
                    this.codeStatus = false;
                    let timer = setInterval(() => {
                        this.count--;
                        if (this.count === 0) {
                            clearInterval(timer);
                            this.count = 60;
                            this.codeStatus = true;
                        }
                    }, 1000);
                } else {
                    // 验证码失败
                    let obj = { content: res.data.message, icon: "danger" };
                    this.$store.dispatch("AsyncToast", obj);
                }
            });
        },
        // 微信登录
        weixinClickFn() {
            this.showPhone = false;
            let _this = this;
            console.log(process.env.VUE_APP_STATE_URL + _this.$route.path);
            new WxLogin({
                id: "weixin",
                appid: "wx67cfaf9e3ad31a0d",
                scope: "snsapi_login",
                redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
                state: encodeURIComponent(
                    window.btoa(process.env.VUE_APP_STATE_URL + _this.$route.path)
                ),
                // 调用样式文件
                href: "data:text/css;base64,Lyogd3hsb2dpbi5jc3MgKi8NCi5pbXBvd2VyQm94IC50aXRsZSwNCi5pbXBvd2VyQm94IC5pbmZvIHsNCiAgICBkaXNwbGF5OiBub25lOw0KfQ0KDQouaW1wb3dlckJveCAucXJjb2RlIHsNCiAgICBtYXJnaW4tdG9wOiAyMHB4Ow0KfQ",
            });
        }
    },
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;

    .modal_bg {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .modal_con {
        width: 555px;
        height: 423px;
        background: url(../assets/images/login/loginBg.png);
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;

        .close {
            right: 60px;
            top: 15px;
            position: absolute;
            cursor: pointer;
        }

        section {
            display: flex;
            justify-content: center;
            padding-top: 40px;
            margin-bottom: 30px;

            span {
                color: #ccc;
                cursor: pointer;

                &:nth-of-type(1) {
                    border-right: 1px solid #ccc;
                    padding-right: 10px;
                    margin-right: 10px;
                }

                &.active {
                    color: #000;
                }
            }
        }

        .line {
            width: 360px;
            height: 50px;
            margin: 0 auto 20px;

            input {
                flex: 1;
                text-indent: 1em;
            }

            .btn {
                color: #fff;
                width: 90px;
                height: 50px;
                background-color: @blue;
                text-align: center;
                margin-left: 10px;
                line-height: 50px;
                cursor: pointer;
            }

            .countdown {
                width: 90px;
                height: 50px;
                color: @black;
                background-color: #ccc;
                text-align: center;
                margin-left: 10px;
                line-height: 50px;
                cursor: pointer;
            }
        }

        .btn_login {
            width: 360px;
            height: 50px;
            background-color: @blue;
            color: #fff;
            line-height: 50px;
            margin: auto;
            text-align: center;
            cursor: pointer;
        }
    }
}

.box {
    width: 360px;
    margin: 0 auto 20px;

    /deep/.slidb {
        width: 100%;
        position: relative;
        box-sizing: border-box;

        canvas {
            width: 100%;
            position: absolute;
            left: 0;
            top: -140px;
            display: none;
            box-sizing: border-box;
        }

        .slide-verify-block {
            width: 69px;
            height: 136px;
        }

        &:hover {
            canvas {
                display: block;
            }
        }
    }
}

#weixin {
    width: 300px;
    margin: 0 auto;
}
</style>